import React, { Component } from 'react';
import './App.css';
import Search from './components/Search';
import List from './components/List';
import Footer from './components/Footer';
import {nanoid} from 'nanoid';
class App extends Component{
  handleSearch = (value) => {
    console.log(value);
    let obj = {
      todo: value,
      done: false,
      id: nanoid()
    }
    this.setState({
      todos: [obj, ...this.state.todos]
    })
  }
  updateTodoList = (id, checked)=>{
    let {todos} = this.state
    todos.forEach(item=>{
      if(item.id === id){
        item.done = checked
      }
    })
    this.setState({
      todos: todos
    })
  }
  deleteTodoList = (id)=>{
    let {todos} = this.state
    todos = todos.filter(item=>item.id !== id)
    this.setState({
      todos: todos
    })
  }
  clearFinish = ()=>{
    let noFinish = this.state.todos.filter(item=>!item.done)
    this.setState({
      todos: noFinish
    })
  }
  selectAll = (flag)=>{
    console.log(flag, '===');
    
    let {todos} = this.state
    todos.forEach(item=>{
      item.done = flag
    })
    this.setState({
      todos: todos
    })
    console.log(this.state)
  }
  state = {
    todos: [{todo: '吃饭', done: true, id: '1'}, {todo: '睡觉', done: true, id: '2'}, {todo: '打豆豆', done: false, id: '3'}]
  }
  render(){
    let {todos} = this.state
    return (
      <div className="App">
        <div className="todo-container">
          <div className="todo-wrap">
            <Search handleSearch={this.handleSearch}/>
            <List todos={todos} updateTodoList={this.updateTodoList} deleteTodoList={this.deleteTodoList}/>
            <Footer todos={todos} selectAll={this.selectAll} clearFinish={this.clearFinish}/>
          </div>
        </div>
      </div>
    )
  } 
}

export default App;
